<template>
    <div class="goodsinfo-container">

        <!--实现动画效果的小球-->
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        
        <!--轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotu="lunbotu" :attribute="'src'" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：
                        <span style="margin-right: 10px"><del>¿{{goodsinfo.market_price}}</del></span>
                        销售价：
                        <span style="font-size: 16px;color:red;font-weight: bold;">¿{{goodsinfo.sell_price}}</span>
                    </p>
                    <p>
                        购买数量：
                        <!--注意:这里的 max是库存量-->
                        <!--由于goodsinfo是通过Ajax动态获取回来的，但是，Ajax是异步请求，需要消耗时间-->
                        <!--因此，可能会导致这样的情况:bobox组件先于Ajax渲染出来，此时，组件被渲染的时候，goodsinfo为空对象，因此，传递到子组件中的stock quantity 是 undefined -->

                        <numbox :max="goodsinfo.stock_quantity" @func="getSelectCount"></numbox>
                    </p>
                    <div>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
                    </div>
                </div>
            </div>
        </div>

        <!--商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsinfo.goods_no}}</p>
                    <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
                    <p>上架时间：{{goodsinfo.add_time|dataFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer btnarea">
                <!-- <router-link :to="'/home/goodsdesc/'+goodsinfo.id">
                    <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                </router-link> -->
                <!--使用编程式导航来实现页面的跳转（JS的代码）-->
                <mt-button type="primary" size="large" plain @click="goDesc">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import swiper from '../sub-components/Swiper.vue'
import numbox from '../sub-components/Numbox.vue'
import { mapMutations } from 'vuex'
export default {
    data(){
        return {
            lunbotu:[],
            goodsinfo:[],
            flag: false,
            selectedCount: 1,
        };
    },
    created(){
        this.getlunbotu();
        this.getGoodsInfoById();
    },
    methods:{
        ...mapMutations(["addToCar"]),
        async getlunbotu(){
            const {data} = await this.$http.get("/api/getthumimages/"+this.id)
            if (data.status===0) {
                return this.lunbotu = data.message;
            }
        },
        async getGoodsInfoById(){
            const {data} = await this.$http.get("/api/goods/getinfo/"+this.id)
            if (data.status===0) {
                return this.goodsinfo = data.message[0];
            }
        },
        //点击按钮跳转到商品描述页面
        goDesc(){
            this.$router.push("/home/goodsdesc/"+this.goodsinfo.id);
        },
        goComment(){
            //this.$router.push("/home/goodscomment/"+this.goodsinfo.id);
            this.$router.push({
                name:"goodscmt",
                params:{ id:this.goodsinfo.id }
            })
        },
        addToCart(){
            //点击加入购物车
            this.flag=!this.flag;
            //调用mutations中的addToCart
            //第一种
            // this.$store.commit("addToCar",{
            //     id: this.goodsinfo.id,
            //     count: this.selectedCount
            // });
            //第二种
            this.addToCar({id:this.goodsinfo.id,count:this.selectedCount,selected:true,price:this.goodsinfo.sell_price})
        },
        beforeEnter(el){
            //动画开始之前，设置小球的起始状态
            el.style.transform = "translate(0,0)";
        },
        enter(el,done){
            //入场动画，小球的终止状态
            //transform:变换
            //translate:位移
            //transition:过渡效果
            el.offsetWidth;
            //设置小球入场动画终止状态
            //el.style.transform = "translate(75px,204px)";

            //动态获取小球的横纵坐标
            const ballPos = el.getBoundingClientRect();
            //动态获取徽标的横纵坐标
            const badgePos = document.getElementById("badge").getBoundingClientRect();
            const left = badgePos.left-ballPos.left;
            const top = badgePos.top-ballPos.top;
            el.style.transform = "translate("+left+"px,"+top+"px)";

            //设置小球的入场动画终止状态
            //贝塞尔曲线在线生成器：http://cubic-bezier.com
            el.style.transition = "all 1s cubic-bezier(.41,-1.02,.42,1.49)";
            //当入场动画完成之后，需要手动调用一下done回调函数
            done();
        },
        afterEnter(el){
            //入场动画完成之后的回调函数。直接跳过小球的出场动画
            this.flag=!this.flag;
        },
        getSelectCount(c){
            //获取选择商品的数量
            this.selectedCount = c;
        }
        
    },
    props:['id'],
    components:{
        swiper,numbox
    }
}
</script>
<style lang="scss" scoped>
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;

    .btnarea{
        flex-direction: column;
        button + button{
            margin-top: 15px;
        }
    }
}

.ball{
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    left:152px;
    top:389px;
    //transform: translate(75px,204px);
}
</style>